<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用电统计')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">

        <div class="col-sm-6" style="margin-top: 20px">
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>运行状态</h5>
                        <h2>ON</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>缺相</h5>
                        <h2>OFF</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>A相过压</h5>
                        <h2>OFF</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>B相过压</h5>
                        <h2>OFF</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6" style="margin-top: 20px">
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>C相过压</h5>
                        <h2>OFF</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>A相欠压</h5>
                        <h2>ON</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>B相欠压</h5>
                        <h2>ON</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox">
                    <div class="ibox-content">
                        <h5>C相欠压</h5>
                        <h2>ON</h2>
                        <div class="progress progress-mini">
                            <div style="width: 100%;" class="progress-bar"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row bs-container">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-6" style="margin-bottom: 5px">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>电流</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            示例 01
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 02
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 03
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>电压</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            UA 10.26
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            UB  10.22
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            UC 10.03
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>功率</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            有功功率   821kw
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            无功功率   351.2kVar
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            视在功率   893kvA
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>电能质量</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            示例 01
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 02
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 03
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>温度</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            示例 01
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 02
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 03
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>电度</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody>
                                    <tr>
                                        <td class="no-borders">
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td class="no-borders">
                                            正向有功 01
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            正向无功 02
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-circle text-navy"></i>
                                        </td>
                                        <td>
                                            示例 03
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="col-sm-12 search-collapse">
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#dianliu" aria-expanded="true">电流</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#dianya" aria-expanded="false">电压</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#gonglv" aria-expanded="false">功率</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#pinlv" aria-expanded="false">频率</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#gonglvyinshu" aria-expanded="false">功率因数</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="dianliu" class="tab-pane active">
                                <div class="panel-body">
                                    <div id="dianliuc" style="width: 819px;height:400px;"></div>
                                </div>
                            </div>
                            <div id="dianya" class="tab-pane">
                                <div class="panel-body">
                                    <div id="dianyac" style="width: 819px;height:400px;"></div>
                                </div>
                            </div>
                            <div id="gonglv" class="tab-pane">
                                <div class="panel-body">
                                    <div id="gonglvc" style="width: 819px;height:400px;"></div>
                                     </div>
                            </div>
                            <div id="pinlv" class="tab-pane">
                                <div class="panel-body">
                                    <div id="pinlvc" style="width: 819px;height:400px;"></div>
                                </div>
                            </div>
                            <div id="gonglvyinshu" class="tab-pane">
                                <div class="panel-body">
                                    <div id="gonglvyinshuc" style="width: 819px;height:400px;"></div>
                                    </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="col-sm-6" style="padding-top: 22px">
                        <div id="chart1" style="width: 100%;height:400px;"></div>
                    </div>
                    <div class="col-sm-6" style="padding-top: 22px">
                        <div id="chart2" style="width: 100%;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('dianliuc'));


    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['IA', 'IB', 'IC']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'IA',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'IB',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'IC',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChart.setOption(option);


</script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChartdy = echarts.init(document.getElementById('dianyac'));


    // 指定图表的配置项和数据
    var optiondy = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['UA', 'UB', 'UC']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'UA',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'UB',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'UC',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChartdy.setOption(optiondy);


</script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('gonglvc'));


    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['有功功率', '无功功率', '视在功率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '有功功率',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '无功功率',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视在功率',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChart.setOption(option);


</script>
<script th:inline="javascript">
    var chart1=echarts.init(document.getElementById('chart1'));
    var option1= {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '分时用电',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '峰' },
                    { value: 735, name: '平' },
                    { value: 580, name: '谷' }
                ]
            }
        ]
    };
    chart1.setOption(option1)
</script>
<script th:inline="javascript">
    var chart2=echarts.init(document.getElementById('chart2'));
    var option2= {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '分时电费',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1098, name: '峰' },
                    { value: 600, name: '平' },
                    { value: 1000, name: '谷' }
                ]
            }
        ]
    };
    chart2.setOption(option2)
</script>
<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('top'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '碳排放top10'
        },
        tooltip: {},
        legend: {
            data: ['碳排放']
        },
        xAxis: {
            data: ['钉钉A楼', '钉钉B楼', '钉钉C楼', '钉钉D楼', '钉钉E楼', '钉钉F楼', '钉钉机房A', '钉钉机房B', '钉钉机房C', '钉钉机房D']
        },
        yAxis: {},
        series: [
            {
                name: '排放量',
                type: 'bar',
                data: [286, 238, 201, 188, 168, 138, 128, 100, 80, 69]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。static/js/plugins/echarts/echarts.min.js
    myChart.setOption(option);
</script>
</body>
</html>
